<template>
  <div class="frameContainers">
    <header
      class="headNav"
      :style="{ paddingTop: statusBarHeight + 'px', height: navHeight + 'px' }"
    >
      <section class="headArea" :style="{ height: headAreaHeight + 'px', marginTop: headAreaMarTop + 'px' }">
        <div class="big">
          <div class="middle">
            <div class="dinggou">
              全国订购热线
            </div>
            <div class="phone">
              400-123-123
            </div>
          </div>
          <image src="./../../static/tabs/banner_ph.png" class="book"></image>
        </div>
        <!--        <div class='rightBox' :style="{ width: headRightBoxW + 'px' }"></div>-->
      </section>
    </header>
  </div>
</template>

<script>
  import app from "./../App";

  export default {
    name: "navbar",
    data() {
      return {
        pixelRatio: app.getSysInfo().pixelRatio, //系统像素比
        statusBarHeight: app.getSysInfo().statusBarHeight, //系统状态栏高度
        navHeight: "", //顶部导航栏高度
        headAreaHeight: app.getSysInfo().pixelRatio * 35 / app.getSysInfo().pixelRatio, //顶部内容区域高度
        headAreaMarTop: "", //顶部内容区域外边距
        headleftBoxW: "", //顶部内容左侧区域外边距
        headRightBoxW: "", //顶部内容右侧区域外边距
        containersHeight: "", //页面内容区域高度
      }
    },
    mounted() {
      //IOS 与 安卓进行差异化处理
      if (app.getSysInfo().system.substring(0, 3) == "iOS") {
        this.navHeight = this.pixelRatio * 40 / this.pixelRatio;
        this.headAreaMarTop = this.pixelRatio * 0.5 / this.pixelRatio;
        this.headleftBoxW = app.getSysInfo().windowWidth - this.pixelRatio * 100 / this.pixelRatio;
        this.headRightBoxW = this.pixelRatio * 100 / this.pixelRatio;
        this.containersHeight = app.getSysInfo().windowHeight - (this.statusBarHeight + this.pixelRatio * 40 / this.pixelRatio);
      } else {
        this.navHeight = this.pixelRatio * 45 / this.pixelRatio;
        this.headAreaMarTop = this.pixelRatio * 2.5 / this.pixelRatio;
        this.headleftBoxW = app.getSysInfo().windowWidth - this.pixelRatio * 110 / this.pixelRatio;
        this.headRightBoxW = this.pixelRatio * 110 / this.pixelRatio;
        this.containersHeight = app.getSysInfo().windowHeight - (this.statusBarHeight + this.pixelRatio * 45 / this.pixelRatio);
      }
      this.$emit('func', this.statusBarHeight);
      this.$emit('func1', this.navHeight);
      this.$emit('func2', this.containersHeight);
    }
  }
</script>

<style scoped>
  .frameContainers {
    position: fixed;
    top: 0px;
    z-index: 100;
    left: 0;
    right: 0;
  }

  .book {
    margin-left: 20px;
    height: 30px;
    width: 100px;
  }

  .big {
    display: flex;
    flex-direction: row;
  }

  .middle {
    display: flex;
    flex-direction: column;
    margin-left: 30px;
  }

  .phone {
    font-size: 14px;
    font-family: SourceHanSerifCN-Heavy, SourceHanSerifCN;
    font-weight: 800;
    color: rgba(144, 42, 38, 1);
    line-height: 20px;
  }

  .dinggou {
    font-size: 11px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(76, 76, 76, 1);
    line-height: 16px;
  }

  /*.frameContainers {*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*}*/
  .headNav {
    background-color: white;
    display: flex;
    align-items: center;
  }

  .headArea {
    width: 100%;
    background-color: white;
  }

  .rightBox {
    width: 18vh;
    height: 100%;
    background-color: white;
    float: right;
  }
</style>
